@import 'variable';

.earlyWarn-list-wrap {
    overflow: hidden;
    .earlyWarn-list {
        margin: 0.12rem 0.11rem;
        &.active{
            .mui-icon-arrowright{
                transform: rotate(90deg);
            }
        }
        .earlyWarn-list-topic {
            background: $bg;
            border-radius: $radius;
            height: 0.7rem;
            line-height: 0.7rem;
            font-size: 0.18rem;
            color: #fff;
            position: relative;
            padding: 0;
         
            .delete {
                background: transparent;
                font-size: 0.16rem;
                color: #A7A6AD;
                padding: 0 0.2rem 0 0;
            }
            &:after,
            &:before {
                display: none;
            }
            > .mui-slider-handle {
                background: transparent;
            }
            span {
                display: inline-block;
            }
            .radius {
                margin: 0 0.12rem 0 0.1rem;
                background: $bg1;
            }
            .title {
                width: 1.3rem;
            }
            .unit {
                color: $darkgray;
                font-size: 0.16rem;
            }
            .trend {
                color: $darkgray;
                margin-left: 0.1rem;
                font-size: 0.14rem;
                &.down {
                    color: $green;
                }
                &.up {
                    color: $red;
                }
            }
            .mui-icon-arrowright {
                transition: transform 0.3s;
                position: absolute;
                right: 0.14rem;
                top: 50%;
                margin-top: -0.1rem;
                font-size: 0.2rem;
            }
        }
        .earlyWarn-list-chart{
            background: $bg;
            border-radius: $radius;
            margin-top:0.12rem;
            display: none;
            .chart-title{
                overflow: hidden;
                height: 0.42rem;
                line-height:0.42rem;
                padding:0 0.14rem;
                .radius{
                    // float: left;
                }
                .text{
                    float: right;
                    font-size: 0.14rem;
                    .icon{
                        margin-right: 0.05rem;
                    }
                }
            }
            .chart-table{
               padding-bottom:0.44rem;
                table{
                    width:100%;
                    text-align: center;
                }
                tr{
                    border:1px solid  #232234;
                    height: 0.44rem;
                    td,th{
                        padding: 0 0.1rem;
                        font-size: 0.14rem;
                    }
                    th{
                        color: #545769;
                        font-size: 0.12rem;
                        font-weight: normal
                    }
                    td{
                        &.up{
                            color:$red;
                        }
                        &.down{
                            color:$green;
                        }
                        &.level{
                            color:$darkgray;
                        }
                    }

                }
            }
          
        }
    }
}
.btn-wrap {
    position: fixed;
    bottom: 0.6rem;
    right: 0.22rem;
    .define {
        width: 1.15rem;
        height: 0.37rem;
        color: #fff;
        border-radius: 0.37rem;
        transition: none;
        @include gradual;
        .mui-icon-plusempty {
            vertical-align: -0.02rem;
            margin-right: -5px;
        }
    }
}
